<!-- 主页 -->
<template>
  <div class="home">
    <header class="header">
      <div class="nav-btn" @click="handleNav">
        <i class="fa fa-bars" aria-hidden="true"></i>
      </div>
      <div class="nav-btn" :class="{'active':like}" @click="handleLike">
        <i class="fa fa-heart" aria-hidden="true"></i>
      </div>
      <div class="nav-btn" :class="{'active':thumb}" @click="handleThumbs">
        <i class="fa fa-thumbs-up" aria-hidden="true"></i>
      </div>
      <div class="nav-btn" @click="handleSearch">
        <i class="fa fa-search" aria-hidden="true"></i>
      </div>
    </header>
    <div class="body">
      <tr-main></tr-main>
    </div>
    <tr-menu :nav="nav" @close="handleNav" />
    <popup v-model="showSearch" position="bottom" style="height:100%;z-index:999;">
      <search @result-click="resultClick" @on-change="getResult" :results="results" v-model="value" position="top" top="0px"
        @on-focus="onFocus" @on-cancel="onCancel" @on-submit="onSubmit" ref="search"></search>
      <p style="text-align:center;">点击搜索框，在点击取消退出</p>
    </popup>
  </div>
</template>
<script>
  import trMenu from './menu'
  import trMain from './main'
  import {
    Search,
    Popup
  } from 'vux'
  export default {
    components: {
      trMenu,
      trMain,
      Search,
      Popup
    },
    data() {
      return {
        showSearch: false,
        like: false,
        thumb: false,
        nav: false,
        results: [],
        value: ''
      }
    },
    computed: {},
    created() {},
    mounted() {},
    methods: {
      getResult() {},
      onFocus() {},
      onCancel() {
        this.showSearch = false;
      },
      onSubmit() {
        this.$refs.search.setBlur()
        this.$vux.toast.show({
          type: 'text',
          position: 'top',
          text: 'on submit'
        })
      },
      resultClick() {},
      handleNav() {
        this.nav = !this.nav;
      },
      handleLike() {
        this.like = !this.like;
      },
      handleThumbs() {
        this.thumb = !this.thumb;
      },
      handleSearch() {
        this.showSearch = true;
      },
    }
  }

</script>
<style lang='scss' scoped>
  @mixin flex-center() {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .home {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    position: relative;
    .header {
      background: #fff;
      position: absolute;
      left: 0;
      top: 0;
      height: 46px;
      width: 100%;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      z-index: 996;
      div {
        height: 46px;
        width: 46px;
        -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
        &.nav-btn {
          color: #ccc;
          touch-action: none;
          @include flex-center();
          i {
            font-size: 22px;
          }
        }
        &.active {
          color: #e2b243;
        }
      }
    }
    .body {
      flex: 1;
      overflow-y: auto;
    }
  }

</style>
